<template>
  <el-row class="top_el">
    <el-col :span="12"
      ><div class="grid-content ep-bg-purple-light"></div>
      <i class="title"> 商品录入</i> 2022.10.22</el-col
    >
    <el-col :span="12">
      <div class="grid-content ep-bg-purple-light"></div>
      <i class="title"> 日常收银管理系统 </i>2022.10.22</el-col
    >
  </el-row>
  <el-row :gutter="20" class="top-bg">
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple content1">
        <div class="eldiv1">商品编号:<el-input v-model="input" placeholder="请输入内容" /></div>
        <div>商品单价:<el-input v-model="input" placeholder="请输入内容" /></div></div
    ></el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple content2">
        商品名称:<el-select v-model="value" class="m-2 el-input" placeholder="请选择内容">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="div2">商品单价:<el-input v-model="input" placeholder="请输入内容" /></div>
      </div>
    </el-col>
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple content3">
        <span>日销售量</span>
        <div>438单</div>
        <i>同比上涨3.06%</i>
      </div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple content4">
        <span>日营业额</span>
        <div>32467.00元</div>
        <i>同比上涨4.28%</i>
      </div></el-col
    >
  </el-row>

  <el-row class="bottom">
    <el-col :span="12" class="goods_info"
      ><div class="grid-content ep-bg-purple">
        <el-card shadow="hover" style="margin-top: 20px" height="450px">
          <el-table :data="tableData">
            <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column>
          </el-table>
        </el-card></div
    ></el-col>
    <el-col :span="12" class="picList"
      ><div class="grid-content ep-bg-purple-light">
        <div id="left"></div>
        <div class="right"></div></div
    ></el-col>
  </el-row>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'

const input = ref('')
const value = ref('')

const options = [
  {
    value: '红烧肉',
    label: '红烧肉',
  },
  {
    value: '西红柿炒鸡蛋',
    label: '西红柿炒鸡蛋',
  },
  {
    value: '青椒炒鸡蛋',
    label: '青椒炒鸡蛋',
  },
]

const tableLabel = {
  id: '订单编号',
  name: '商品名称',
  danjia: '商品单价',
  num: '商品数量',
  buyTime: '购买时间',
  time: '录入时间',
}
const tableData = [
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
  {
    id: '1231321',
    name: '红烧肉',
    danjia: '20',
    num: '18',
    buyTime: '2022-12-1',
    time: '12-12',
  },
]

//图表
let myChart
const TuBiao3 = () => {
  var chartDom = document.getElementById('left')
  myChart = echarts.init(chartDom)
  var option

  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize()
    }
  })
  option = {
    title: {
      // text: '金额/万',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '8%',
      data: ['销售额'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [15, 30],
      },
    },
    yAxis: {
      type: 'value',
      name: '金额/万',
      nameGap: '11',
      // splitNumber: 3,
      boundaryGap: ['20%', '20%'],
      axisTick: {
        show: true, // 是否显示坐标轴刻度
        inside: true, // 坐标轴刻度是否朝内，默认朝外
        length: 20, // 坐标轴刻度的长度
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [15, 30],
      },
      axisLabel: {
        lineHeight: '10',
      },
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        stack: 'Total',
        data: [10, 20, 15, 18, 16, 14, 15, 18, 19, 20, 30, 15],
      },
    ],
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  TuBiao3()
})
onBeforeUnmount(() => {
  myChart.dispose()
})
</script>

<style lang="less" scoped>
.top_el {
  // height: 40px;
  margin-bottom: 10px;
}
// .top-bg {
//   height: 170px;
// }
.content1 {
  height: 200px;
  .eldiv1 {
    margin-bottom: 120px;
  }
}
.content2 {
  height: 200px;
  .div2 {
    margin-top: 120px;
  }
}
.content3 {
  background-color: rgb(178, 201, 246);
  height: 200px;
  padding-top: 5px;
  padding-left: 5px;
  span {
    font-size: 12px;
    font-weight: 700;
  }
  div {
    font-size: 40px;
    padding-top: 45px;
    text-align: center;
    margin-bottom: 10px;
  }
  i {
    font-size: 14px;
    font-family: STHeiti;
    font-weight: 400;
    color: #888888;
    padding-left: 55%;
  }
}
.content4 {
  background-color: rgb(255, 232, 177);
  height: 200px;
  padding-top: 5px;
  padding-left: 5px;
  span {
    font-size: 12px;
    font-weight: 700;
  }
  div {
    font-size: 40px;
    padding-top: 45px;
    text-align: center;
    margin-bottom: 10px;
  }
  i {
    font-size: 14px;
    font-family: STHeiti;
    font-weight: 400;
    color: #888888;
    padding-left: 55%;
  }
}
.el-input {
  width: 75%;
  margin-left: 5px;
}
.el-col .title {
  // font-weight: 700;
  font-size: 16px;
}

.bottom {
  // margin-top: 50px;
  .goods_info {
    height: 400px;
    // background-color: rebeccapurple;
  }
  .picList {
    height: 400px;
  }
}
.el-card {
  font-size: 12px;
}

#left {
  height: 460px;
}
</style>
